<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<style>
			/*文件夹图标*/
			@font-face {
			  font-family: 'iconfont';  /* project id 1571015 */
			  src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot');
			  src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff2') format('woff2'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff') format('woff'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.svg#iconfont') format('svg');
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			#button-list{
				z-index: 999;
				background-color: rgba(255,255,255,0);
				width: 354px;
				position: fixed;
				bottom: 5px;
				display: none;
			}
			.mui-btn{
		        margin-top: 10px;
		        margin-left: 10px;
		    }
		    .test-id{
				display: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1);"><span class="mui-icon mui-pull-left mui-icon-back" id="history-page" style="color: #000"></span>
			<h1 class="mui-title" style="font-size: 20px;">选择移动位置</h1>
		</header>
		
				<!--当前页面的pid-->
		<div class="new-page-pid" style="display: none;"></div>
		<div id="folder_all">
			<div class="folder-list folder_name" v-for="list in listes">
				<label class="inp-label">
					<span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>
					<span class="title-weight">{{list.menuname}}</span>
					<span class="test-id">{{list.id}}</span>
					<p class="title">{{list.createTime}}</p>
				</label>
			</div> 
		</div>
		
		<div id="button-list">
			<ul class="mui-clearfix">
				<li id="move-btn">
					<img src="img/move.png" />
					<span>移动</span>
				</li>
				<li id="del-btn">
					<span>删除</span>
				</li>
			</ul>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<button type="button" class="mui-btn mui-btn-outlined" style="background-color: #EFEFF4; width: 150px;" id='promptBtn'>
					新建文件夹
			</button>
			<button type="button" class="mui-btn mui-btn-outlined" style="background-color: #EFEFF4; width: 150px; margin-left: 55px;" id="move-tone">
				移动到此处
			</button>
			<div id="info"></div>
		</nav>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var token;
			mui.plusReady(function(){
				token=plus.storage.getItem("accessToken");
			})
			//根据页面传pid值，查找该层所有文件夹
			new Vue({
				el: '#folder_all',
				data() {
					return {
						listes: null
					}
				},
				mounted() {
					axios
						.get('http://343bdb1.cpolar.io/note-folder/classification/getallfolder?token='+token)
						.then(response => (this.listes = response.data))
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				},
			})
			$('.folder_name').click(function(){
				alert("aa")
                //关闭等待框
				console.log($(this).find('.test-id').innerText);
                $('#folder_all').empty();
				mui.ajax('http://343bdb1.cpolar.io/note-folder/classification/getallfolder?token='+token,{
					data:{
						id:id
					},
					dataType:'json',//服务器返回json格式数据
					crossDomain: true,
					type:'get',//HTTP请求类型
					success:function(data){
						for(var i=0;i<data.length;i++){
							html += '<div class="folder-list folder_name" v-for="list in listes"><label class="inp-label"><span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>'+
							+'<span class="title-weight">'+data[i].menuname+'</span><span class="test-id">'+data[i].id+'</span><p class="title">'+data[i].createTime+'</p></label></div>'
						}
						document.getElementById('folder_all').innerHTML=html;
					}
				});
			})

			//添加文件夹按钮
			document.getElementById("promptBtn").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('', '请输入名称:', '新建文件夹', btnArray, function(e) {
					if (e.index == 1) {
						var faId = $('.new-page-pid').text();
						 $.ajax({
			                url :'http://343bdb1.cpolar.io/note-folder/classification/createfolder?token='+token,
			               	data:{
			               		id: faId,
								folderName: e.value
							},
							type:"POST",   //请求方式
							dataType:"json",
			                success:function(d) {
			                    mui.toast('添加成功');
               				},
			                error:function(){
								//异常处理；
								mui.toast('添加失败');
							}
            			})
					} else {
						
					}
				})
			});
			
			//移动按钮
			document.getElementById("move-tone").addEventListener('tap', function(e) {
				mui.plusReady(function(){
	                var self = plus.webview.currentWebview();
	                var id = self.pid;//获得单个移动文件夹的id
	                alert(id);
					var faId = $('.new-page-pid').text();
					$.ajax({
		                url :'http://343bdb1.cpolar.io/note-folder/classification/moveFolder?token='+token,
		               	data:{
		               		folderId: id,
		               		toId: faId
						},
						type:"POST",   //请求方式
						dataType:"json",
		                success:function(d) {
		                	window.location.href="tabbar.html";
		                    mui.toast('添加成功');
           				},
		                error:function(){
							//异常处理；
							mui.toast('添加失败');
						}
        			})
				});
			});
			
			
		</script>
	</body>
</html>
